<template>
  <div>
    <!--单点 单元格讲师信息-->

    <!--修改弹出框-->
    <div>
      <!--弹窗-->
      <el-dialog width="65%" title="信息修改" :visible.sync="dialogFormVisible">
        <el-form   :model="formupd" label-width="100px" >
          <el-alert class="title" :closable="false" title="一、讲师基本信息" type="info" />
          <br/>
          <el-row>
            <el-col :span="12"><div>
              <el-form-item label="用户手机：">
                <el-input :disabled="true" v-model="formupd.tPhone"></el-input>
              </el-form-item>
            </div></el-col>
            <el-col :span="12"><div>
              <el-form-item label="讲师名称：" prop="tName">
                <el-input v-model="formupd.tName" ></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div>
              <el-form-item label="邮箱：">
                <el-input v-model="formupd.tEmail"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-form-item label="讲师简介：">
            <el-input type="textarea" :rows="2"
                      placeholder="请输入内容"
                      v-model="formupd.tJianjie">
            </el-input>
          </el-form-item>
          <el-alert class="title" :closable="false" title="二、讲师分成及银行信息" type="info" />
          <br/>
          <el-row>
            <el-col :span="12"><div>
              <el-form-item label="开户名称：">
                <el-input :disabled="true" v-model="formupd.tName"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>
          <el-row>
            <el-col :span="12"><div>
              <el-form-item label="银行卡号：">
                <el-input :disabled="true" v-model="formupd.tBankcard"></el-input>
              </el-form-item>
            </div></el-col>
          </el-row>

        </el-form>
        <el-row style="margin-top:17px; ">
          <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="closee">取 消</el-button>
          <el-button style="float:right" size="mini" type="primary" @click="updteacher('formupd')">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>
    <!--点击手机号-->
    <div>
      <el-dialog width="60%" title="信息查看" :visible.sync="phoneDialogTableVisible" style="margin-top: 2%">
        <el-form :inline="true">
          <el-card >
            <el-divider style="font-weight:bold; background-color:#f4f4f5">讲师个人信息</el-divider>

            <el-row>
              <el-col :span="8"><div>

                <el-form-item label="头像:">
                  <div class="demo-image">
                    <div class="block">
                      <el-image style="width: 100px; height: 100px" :src="gridData.t_image"></el-image>
                    </div>
                  </div>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="讲师编号:">
                  <span >{{gridData.teacher_num}}</span>
                </el-form-item>
                <br/>
                <el-form-item label="讲师名称:">
                  <span >{{gridData.t_name}}</span>
                </el-form-item>
              </div></el-col>
              <br/><br/><br/><br/>
              <el-col :span="8" v-model="gridData.status"><div>
                <el-form-item label="状态:">
                  <template slot-scope="scope">
                    <span v-if="gridData.status == 3">正常</span>
                    <span v-if="gridData.status == 4">禁用</span>
                  </template>
                </el-form-item>
              </div></el-col>
            </el-row>

            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="手机号:">
                  <span >{{gridData.t_phone}}</span>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="邮箱:">
                  <span >{{gridData.t_email}}</span>
                </el-form-item>
              </div></el-col>

            </el-row>

            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="注册时间:">
                  <span >{{gridData.t_createtime}}</span>
                </el-form-item>
              </div></el-col>

            </el-row>
          </el-card>
          <br/>
          <el-card >
            <el-divider style="font-weight:bold; background-color:#f4f4f5">简介</el-divider>
            <el-form-item v-html="gridData.t_jianjie">
            </el-form-item>
          </el-card>
          <br/>
          <el-card >
            <el-divider style="font-weight:bold; background-color:#f4f4f5">分成情况</el-divider>
            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="讲师分成情况:">
                  <span>{{gridData.t_share}}%</span>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="累计总收入:">
                  <span>{{gridData.shouru}}元</span>
                </el-form-item>
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="已提现金额:">
                  <span >{{gridData.use_withdrawn}}元</span>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="可提现金额:">
                  <span >{{gridData.tixian}}元</span>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="冻结金额:">
                  <span >{{gridData.dongjie}}元</span>
                </el-form-item>
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="银行卡号:">
                  <span >{{gridData.t_bankcard}}</span>
                </el-form-item>
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><div>
                <el-form-item label="开户姓名:">
                  <span >{{gridData.t_name}}</span>
                </el-form-item>
              </div></el-col>
              <el-col :span="8"><div>
                <el-form-item label="身份证号:">
                  <span >{{gridData.t_idcard}}</span>
                </el-form-item>
              </div></el-col>
            </el-row>
          </el-card>
        </el-form>
        <el-row style="margin-top:17px; ">
          <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="phoneDialogTableVisible=false">取 消</el-button>
        </el-row>
      </el-dialog>
    </div>
    <!--分成弹出层-->
    <el-dialog
      title="分成"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
        <el-form label-width="80px" :model="formfc">
          <el-form-item label="分成">
            <el-input v-model="formfc.tShare"></el-input>

          </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </span>
      </span>
    </el-dialog>
    <!--模糊查询-->
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="讲师名称">
        <el-input v-model="pagess.tname" placeholder="讲师名称"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="pagess.tphone" placeholder="手机号"></el-input>
      </el-form-item>
      <template>
        <el-select v-model="pagess.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-form-item>
        <el-button type="primary" @click="se()">查询</el-button>
        <el-button @click="cz()">重置</el-button>
      </el-form-item>
    </el-form>



  <el-table

    :data="tableData"
    @cell-click="column"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="tid"
      label="序号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="tphone"
      label="手机号"
      width="180"
      >
      <template labl="tphone" slot-scope="scope">
      <el-button type="text" @click="phonecha(scope.row.tid)">{{scope.row.tphone}}</el-button>
      </template>
    </el-table-column>

    <el-table-column
      prop="tname"
      label="讲师名称">
    </el-table-column>
    <el-table-column
      prop="temail"
      label="邮箱">
    </el-table-column>
    <el-table-column
      prop="tshare"
      label="分成比例">
      <template labl="tphone" slot-scope="scope">
        <el-button type="text">{{scope.row.tshare}}%</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          @change="handleChangeStatus(scope.row.tid, scope.row.status)"
          :active-value="4"
          :inactive-value="3"
          active-color="#ff4949"
          inactive-color="#13ce66"
          active-text="禁用"
          inactive-text="正常">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作">
      <template slot-scope="scope">
      <el-button type="primary" icon="el-icon-edit" size="small" @click=update(scope.row) :disabled="scope.row.sstatus==1">修改</el-button>
      <el-button type="primary" @click="fencheng(scope.row)" size="small">设置分成</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!--分页-->


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagess.currentPage"
        :page-sizes="[2,4,6,8]"
        :page-size="pagess.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagess.total">
      </el-pagination>

  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import qs from  'qs'

  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      //修改
      //取消按钮
      closee(){
        this.dialogFormVisible=false;
      },

      //修改按钮状态
      handleChangeStatus(tid, status) {
        //alert(JSON.stringify(status))
        const title = { 4: '禁用', 3: '启用' }
        this.$confirm(`确定要${title[status]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8061/list/teacher/statu?tid="+tid+"&status="+status).then(r=>{
              this.query()
          })

        }).catch(() => {

          this.query()
        })
      },
      /*查询*/
      se() {
        this.pagess.currentPage=1
       this.query();
      },
      /*分页  更改显示的条数*/
      handleSizeChange(val) {

        this.pagess.pagesize=val;
        this.query()
      },
      //
      handleCurrentChange(val) {
       this.pagess.currentPage=val;
       this.query()
      },
      /*重置*/
      cz() {
        this.pagess.tname=''
        this.pagess.tphone=''
        this.pagess.status=''
      },
      //选中手机号列点击
      column(row,cell){
        if (cell.property=="tphone"){
          this.tInformation=true;
        }
      },

      /*查询*/
      query(){
        /*this.$axios.get("http://localhost:8061/list/teacher/sele").then(r=>{

          this.tableData=r.data;
        })*/
        this.$axios.post("http://localhost:8061/list/teacher/selefy",qs.stringify(this.pagess)).then(r=>{
            this.tableData=r.data.obj.records;
            this.pagess.total=r.data.obj.total;
        })
      },
      /*分成数据获取*/
      fencheng(obj){
      //alert(JSON.stringify(obj))
        this.dialogVisible=true;
        this.formfc.tShare=obj.tshare
        this.formfc.tid=obj.tid;
      },
      /*分成修改*/
      submitForm(){

        if (!/^(?:[1-9]?\d|100)$/.test(this.formfc.tShare)){
          this.$alert('请输入数据', '提示', {
            confirmButtonText: '确定',
          });

        } else {
          this.$axios.post("http://localhost:8061/list/teacher/upfcs",qs.stringify(this.formfc)).then(r=>{
            if(r.data.obj){
              this.dialogVisible=false;
              this.query();
            }
          })
        }

      },
      //修改按钮
      update(obj){
        this.dialogFormVisible=true
        this.formupd.tid=obj.tid;
        this.formupd.tPhone=obj.tphone;
        this.formupd.tName=obj.tname;
        this.formupd.tEmail=obj.temail;
        this.formupd.tJianjie=obj.tjianjie;
        this.formupd.tBankcard=obj.tbankcard;
      },
      //修改弹出框的确认按钮
      updteacher(formupd){
        if ( !/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,5}$/.test(this.formupd.tName)){
          this.$alert('请输入真实名称', '提示', {
            confirmButtonText: '确定',
          });

        }else if (!/^[\u4E00-\u9FA5A-Za-z0-9_]+$/.test(this.formupd.tJianjie)) {
          this.$alert('请输入简介', '提示', {
            confirmButtonText: '确定',
          });
        }else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.formupd.tEmail)) {
          this.$alert('请输入邮箱', '提示', {
            confirmButtonText: '确定',
          });
        } else{
          this.$axios.post("http://localhost:8061/list/teacher/upfc",qs.stringify(this.formupd)).then(r=>{
            if (r){
              this.dialogFormVisible=false;
              this.query();
            }

          })

        }

      },
      //点击手机号时查询数据
      phonecha(obj){

        this.phoneDialogTableVisible=true;
        this.$axios.get("http://localhost:8061/list/share/selec?tid="+obj).then(r=>{
          r.data.obj.forEach(r=>{
            alert(JSON.stringify(r))
            this.gridData=r;
          })

        })
      },
      //区分查询
      sele(){
        this.$axios.get("http://localhost:8061/list/teacher/sele").then(r=>{

          this.tableData=r.data.obj;
        })
      },

    },

    created(){
      //this.sele();
      let reg=
      this.query();
    },

    data() {
      return {
        tableData: [],
        //修改参数
        tbTeacherMoney:{},
        gridData:{
          t_share:"",
        },


        /*  t_share:"",
          t_email:"",
          t_idcard:"",
          t_phone:"",
          tid:"",
          uid:"",
          removeid:"",
          t_jianjie:"",*/
        options:[{
          value:3,
          label:"正常"
        },{
          value:4,
          label:"禁用"
        }
        ],
        formfc:{
          tid:'',
          tShare:''
        },
        formupd:{
          tid:"",
          tPhone:"",
          tName:"",
          tEmail:"",
          tJianjie:"",
          tBankcard:"",
        },
        upd:{
          tphone:"",
          tname:"",
        },
        formInline: {
          formInline:false,
          user: '',
          region: ''
        },
        phoneDialogTableVisible:false,
        dialogVisible :false,
        dialogFormVisible:false,
        tInformation:false,
        value2: true,
        /*分页*/
        pagess:{
          currentPage:1,//当前页
          pagesize:2,//每页显示条数
          total:0,//数据的总条数
          tname:"",
          tphone:"",
          status:"",
        },

      }
    }
  }
</script>
